//列表页
require(['./config'], () => {
    require(['swiper', 'template','header', 'footer'], (Swiper,template,Header) => {
        class ListPage {
            constructor() {
                this.header();
                this.banner();
                this.Template();
                this.tab();
                // this.tab().then(() => {

                // })
            }
            header() {
                new Header()
            }
            //轮播图
            banner () {
                new Swiper('.lunbo', {
                    // direction: 'vertical', // 垂直切换选项
                    loop: true, // 循环模式选项
                    
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    speed: 1200,
                    autoplay: {//时间
                        delay: 2000,
                    },
                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    }
                })
            }
            //渲染页面
            // init(){
            //     return new Promise((resolve, reject) => {

            //     })
            // }
            // 选项卡点击按钮(现阶段实现点击时重新渲染一下页面就行)
            tab() {
                $('#but_01').on('click', () => {
                    $('#but_01').css({"background":"#b82c22","color":"#ffffff"});
                    $('#but_02').css({"background":"#f3f3f3","color":"black"})
                    this.Template()//点击按钮重新渲染页面
                });
                $('#but_02').on('click', () => {
                    $('#but_02').css({ "background": "#b82c22", "color": "#ffffff" });
                    $('#but_01').css({ "background": "#f3f3f3", "color": "black" })
                    this.Template()
                });
            }
            // 接口 模板数据
            Template(){
                
                $.get('http://rap2api.taobao.org/app/mock/244799/ListPage', resp => {
                    console.log(resp)
                    if (resp.code === 200) {//我们在接口中写过一个code判断一下是否接收到了数据,这样就算我们有接收到数据也不会报错
                        
                        //新品
                        const { NewProducts } = resp.body
                        const html_01 = template('Template_01', { NewProducts})
                        $('#NewProducts').html(html_01)

                        //灯芯绒
                        const { corduroy } = resp.body
                        const html_02 = template('Template_02', { corduroy })
                        $('#corduroy').html(html_02)

                        //法兰绒
                        const { Flannel } = resp.body
                        const html_03 = template('Template_03', { Flannel })
                        $('#Flannel').html(html_03)

                        //牛津纺
                        const { Oxford } = resp.body
                        const html_04 = template('Template_04', { Oxford })
                        $('#Oxford').html(html_04)

                        //水洗棉
                        const { WashedCotton } = resp.body
                        const html_05 = template('Template_05', { WashedCotton })
                        $('#WashedCotton').html(html_05)

                        //麻衬衫
                        const { LinenShirt } = resp.body
                        const html_06 = template('Template_06', { LinenShirt })
                        $('#LinenShirt').html(html_06)

                    }
                })
            }
        }
        new ListPage()
    })
})